import React, { ReactElement, ReactNode } from "react";
import "./DesignerHeader.less";
import { observer } from "mobx-react";
import canvasHdStore from "./items/canvas/CanvasManager";
import projectHdStore from "./items/project/ProjecManager";
import themeHdStore from "./items/theme/ThemeManager";
import bluePrintHdStore from "./items/blue-print/BluePrintHdStore";
import CanvasHdConfigImpl from "./items/canvas/CanvasHdConfigImpl";
import ProjectHdItemImpl from "./items/project/ProjectHdItemImpl";
import ThemeHdItemImpl from "./items/theme/ThemeHdItemImpl";
import BluePrintHdImpl from "./items/blue-print/BluePrintHdImpl";
import {
  AfferentFour,
  EfferentFour,
  HardDiskOne,
  PageTemplate,
  Refresh,
} from "@icon-park/react";
export interface IHeaderItem {
  icon: ReactNode;
  name: string;
  key: string;
  onClick?: () => void;
}
const centerItems: Array<IHeaderItem> = [
  {
    icon: (
      <PageTemplate
        theme="filled"
        style={{ marginTop: 2 }}
        strokeWidth={3}
        strokeLinecap="square"
      />
    ),
    name: "画布",
    key: "canvas",
    onClick: () => canvasHdStore.setCanvasVisible(true),
  },
];
type HeaderProps = {
  onPreview: () => void;
  onSave: () => void; // 保存
  onExport: () => void; // 导出
  onImport: () => void; // 导入
};
const Header: React.FC<HeaderProps> = observer((props: HeaderProps) => {
  const { onExport, onSave, onImport } = props;
  const leftItems: Array<IHeaderItem> = [
    {
      icon: (
        <Refresh
          theme="outline"
          style={{ marginTop: 2 }}
          strokeWidth={4}
          strokeLinecap="square"
          color="#fff"
        />
      ),
      name: "重载设计器",
      key: "preview",
      onClick: () => {
        window.location.reload();
      },
    },
    {
      icon: (
        <AfferentFour
          theme="filled"
          style={{ marginTop: 2 }}
          strokeLinecap="square"
        />
      ),
      name: "导入",
      key: "import",
      // onClick: () => importProject(),
      onClick: () => onImport(),
    },
    {
      icon: (
        <EfferentFour
          theme="filled"
          style={{ marginTop: 2 }}
          strokeLinecap="square"
        />
      ),
      name: "导出",
      key: "export",
      onClick: () => onExport(),
    },
    {
      icon: (
        <HardDiskOne
          theme="filled"
          style={{ marginTop: 2 }}
          strokeLinecap="square"
        />
      ),
      name: "保存",
      key: "save",
      onClick: () => onSave(), // doSave(),
    },
  ];

  const buildHeaderItemUI = (
    items: Array<IHeaderItem>
  ): Array<ReactElement> => {
    const headerItems: Array<ReactElement> = [];
    for (let i = 0; i < items.length; i++) {
      const { icon: Icon, name, key, onClick } = items[i];
      headerItems.push(
        <div key={key} className={"header-item"} onClick={onClick}>
          {Icon}
          <span className={"item-span"}>{name}</span>
        </div>
      );
    }
    return headerItems;
  };

  return (
    <>
      <div className={"designer-header"}>
        <div className={"header-left"}>
          <div className={"header-title"}>EGod 场景设计器</div>
        </div>
        <div className={"header-center"}>{buildHeaderItemUI(centerItems)}</div>
        <div className={"header-right"}>{buildHeaderItemUI(leftItems)}</div>
        {canvasHdStore.canvasVisible && <CanvasHdConfigImpl />}
        {projectHdStore.projectVisible && <ProjectHdItemImpl />}
        {themeHdStore.themeVisible && <ThemeHdItemImpl />}
        {bluePrintHdStore.bluePrintVisible && <BluePrintHdImpl />}
      </div>
    </>
  );
});

export default Header;
